<template>
  <div>
    <ocean :use="template" class="theme_box"></ocean>
    <ocean :use="drawer"></ocean>
  </div>
</template>
<script lang="tsx" setup>
import { useTableTemplate, useDrawer } from '@/ocean';
import OrderDetail from './components/orderDetail.vue';
import { OrderAPI } from '@/app/api';
import { useMainStore } from "@/store";
import { message } from '@/utils/naiveApi';
let mainStore = useMainStore();
let template = useTableTemplate('订单列表', {
  query: (data) => {
    OrderAPI.queryOrderList(data).then(({ data, total }) => {
      template.table.setData(data);
      template.pagination.setCount(total);
    })
  }
})
console.log(mainStore.userInfo)
template.form.setModel({
  userId: mainStore.userInfo.id
})
template.form.item('订单号', 'orderId').input();
template.form.item('门店名称', 'storeName').input();
template.form.item('商品名称', 'goodsName').input();
template.form.item('用户名称', 'userName').input();
template.form.item('手机号', 'userPhone').input();
template.form.item('状态', 'status').input();

enum Status {
  "已完成" = "success",
  "制作中" = "primary",
  "待支付" = "warning",
  "已失效" = "error",
}

template.table.define({
  title: '订单号',
  render: (row) => <n-button quaternary type="info" on-click={() => { drawer.open({ order: row }) }} >{row.orderId}</n-button>
});
template.table.column('用户名', 'userName');
template.table.column('手机号', 'userPhone');
template.table.column('商品数量', 'goodsTotalCount');
template.table.column('支付金额', 'paymentAmount');
template.table.column('创建时间', 'createTime');
template.table.define({
  title: '处理状态',
  render(row) {
    return <n-tag bordered={false} type={Status[row.orderStatus as any]}>{row.orderStatus}</n-tag>
  }
})
template.table.define({
  title: '操作',
  render: (row) => {
    if (row.orderStatus == '制作中') {
      return <n-space>
        <n-button
          type="primary"
          on-click={() => updateOrder(row)}>
          完成订单
        </n-button>
      </n-space>
    }
    return null;
  }
});
const updateOrder = (row) => {
  OrderAPI.updateOrder({ id: row.id }).then((res) => {
    if (res.code) { return message.warning(res.msg) }
    message.success('操作成功，订单完成')
    template.query();
  })
}
let drawer = useDrawer('订单详情', OrderDetail, { size: 'large' });
drawer.button('确认', { type: 'primary' }).click(() => drawer.close())
template.query();
</script>